<template>
	<view class="screenTag">
		<nav-bars bgColor="#fff" fontColor="#000" :title="navBarTitle"></nav-bars>
		<view class="content">
			<view class="item" v-for="(item,index) in tagList" :key="index">
				<view class="tagTitle">{{item.group_name}}</view>
				<view class="tagBox">
					<text :class="{'activeTag':item1.checked}" v-for="(item1,index1) in item.tags" :key="index1" @click="selectTag(index,item1,index1)">{{item1.tag_name}}</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="left">已选择{{tag_ids.length}}个标签</view>
			<view class="right" @click="submitBack">确定</view>
		</view>
	</view>
</template>

<script>
	import service_client from '@/service/client.js'
export default{
	data(){
		return{
			navBarTitle:'标签筛选',
			tagList:[], //标签列表
			tag_ids:[], //已选标签
		}
	},
	onLoad() {
		this.getTagList()
	},
	methods:{
		// 获取标签列表
		getTagList(){
			let params = {
				// tag_ids:[],
				// group_ids:[]
			}
			service_client.getTagList(params).then(res=>{
				console.log(res,'标签列表')
				if(res.code==1){
					res.data.map(item=>{
						item.tags.map(item1=>item1.checked = false)
					})
					this.tagList = res.data?res.data:[]
				}
			})
		},
		
		// 选择标签
		selectTag(index,item1,index1){
			if(item1.checked){
				this.tagList[index].tags.map(item=>item.checked = false)
				this.tagList[index].tags[index1].checked = false
			}else{
				this.tagList[index].tags.map(item=>item.checked = false)
				this.tagList[index].tags[index1].checked = true
			}
			let arr = []
			this.tagList.map(item=>{
				item.tags.map(item1=>{
					if(item1.checked){
						arr.push(item1)
					}
				})
			})
			this.tag_ids = arr
			console.log(this.tag_ids,'已选择的标签')
		},
		
		// 确定按钮
		submitBack(){
			console.log(this.tag_ids,'选择的标签')
			let pages = getCurrentPages();  //获取所有页面栈实例列表
			console.log(pages)
			let nowPage = pages[ pages.length - 1];  //当前页页面实例
			let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
			console.log(prevPage)
			prevPage.$vm.tagsArr = this.tag_ids;
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.screenTag{
		height: 100%;
		background-color: #fff;
		position: relative;
		.content{
			padding: 0 32rpx;
			background-color: #fff;
			margin-bottom: 110rpx;
			.item{
				padding: 54rpx 0;
				.tagTitle{
					font: bold 34rpx/34rpx PingFang SC;
					color: #3e3e3e;
					margin-bottom: 30rpx;
				}
				.tagBox{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					text{
						padding: 16rpx 32rpx;
						border-radius: 29rpx;
						border: 2rpx solid #999;
						font: 500 26rpx/26rpx PingFang SC;
						color: #666;
						margin:0 20rpx 20rpx 0;
					}
					.activeTag{
						border-color: #C3AB7C;
						background-color: #C3AB7C;
						color: #fff;
					}
				}
			}
		}
		.btn{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 110rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			// height: calc(110rpx+ constant(safe-area-inset-bottom));			// height: calc(110rpx + env(safe-area-inset-bottom));			// padding-bottom: constant(safe-area-inset-bottom);			// padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0rpx -3rpx 12rpx 0rpx rgba(147, 147, 147, 0.09);
			.left{
				font: 500 26rpx/26rpx PingFang SC;
				color: #888888;
			}
			.right{
				width: 200rpx;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font: 500 28rpx/80rpx PingFang SC;
				color: #402200;
				background: linear-gradient(216deg, rgba(227, 210, 175, 0.94), rgba(195, 171, 124, 0.94));
			}
		}
	}
</style>
